<template>
  <el-date-picker
    v-model="timeVal"
    :type="props.type"
    placeholder="请选择"
    clearable
    :value-format="props.format"
    :format="props.format"
    :style="'width:' + props.width"
    :disabled-date="disabledDate"
  />
</template>

<script setup name="MyDateTime">
import { computed, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    default: ''
  },
  format: {
    default: 'YYYY-MM-DD HH:mm:ss'
  },
  width: {
    default: '212px'
  },
  type: {
    default: 'datetime'
  },
  disable: {
    default: false
  },
  minTime: {
    default: ''
  },
  maxTime: {
    default: ''
  }
});
const disabledDate = time => {
  if (!props.disable) return false;
  if (props.minTime) {
    return (
      time.getTime() <= new Date(props.minTime).getTime() - 1000 * 60 * 60 * 24
    );
  } else if (props.maxTime) {
    return (
      time.getTime() >
        new Date(props.maxTime).getTime() - 1000 * 60 * 60 * 24 ||
      time.getTime() < Date.now() - 1000 * 60 * 60 * 24
    );
  } else {
    return time.getTime() <= Date.now() - 1000 * 60 * 60 * 24;
  }
};
const timeVal = computed({
  get: () => props.modelValue,
  set: n => emit('update:modelValue', n)
});
</script>

<style lang="scss" scoped></style>
